﻿<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxComboBox directive for AngularJS</title>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            var data = new Array();

            var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
            var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];

            for (var i = 0; i < firstNames.length; i++) {
                var row = {};
                row["label"] = firstNames[i];
                row["value"] = lastNames[i];
                data[i] = row;
            }

            $scope.comboBoxSettings = {
                source: data, itemHeight: 50, height: 25, width: 220,
                renderer: function (index, label, value) {
                    var datarecord = data[index];
                    var imgurl = '../../images/' + label.toLowerCase() + '.png';
                    var img = '<img height="30" width="25" src="' + imgurl + '"/>';
                    var table = '<table style="color: inherit; font-size: inherit; font-style: inherit;"><tr><td style="width: 35px;">' + img + '</td><td>' + label + " " + value + '</td></tr></table>';
                    return table;
                },
                renderSelectedItem: function (index, item) {
                    return item.label + " " + item.value;
                }
            };

            $scope.selectedValue = data[0];
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-combo-box ng-model="selectedValue" jqx-ng-model jqx-settings="comboBoxSettings"></jqx-combo-box>
        <br />
        <br />
        Selected: {{selectedValue.label + " " + selectedValue.value}}
    </div>
</body>
</html>
